// pages/exhibitionDetail/exhibitionDetail.js
import profile from '../../profile'

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lang: app.globalData.language,

    index: profile.exhibitionDetail,
    
    indicatorDots: false,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
    swiperCurrent: 0,

    exhibitionLike: profile.exhibitionDetail.exhibitionLike,
    likeNumber: profile.exhibitionDetail.likeNumber,

    signinList: profile.exhibitionDetail.signinList,
    signinNumber: profile.exhibitionDetail.signinNumber,
    signBtnText: profile.exhibitionDetail.signBtnText,
    signBtnText_en: profile.exhibitionDetail.signBtnText_en,
    
    bg: '../../images/tab_box_bg0.png',
    tabNum: 0,
    tabList: profile.exhibitionDetail.tabList,

    // 展览作品
    items: profile.exhibitionDetail.exhProList,
    masonryHeight: 0,
    // 是否打开评论
    isCommentOpen: false,

    commentList: profile.exhibitionDetail.commentList,

    // 评论内容
    commentValue: '',

    popShow: false,
    isShowImg: true,
    popImgSrc: '',

    isLong: false,

    isShow: false,
    integralNum: 20
  },

  // 图片放大
  imgEnlargeTap: function (e) {
    let list = this.data.items, id = e.detail, popImgSrc = this.data.popImgSrc;
    for (let i=0;i<list.length;i++) {
      if (id == list[i].id) {
        popImgSrc = list[i].image
      }
    }
    this.setData({
      popShow: true,
      popImgSrc
    })
  },

  // 弹层事件
  popBtnTap: function (e) {
    this.setData({
      popShow: false
    })
  },

  // 提交评论事件
  submitCommentTap: function(e) {
    let comment = this.data.commentList, value = this.data.commentValue, id = Math.random(), userInfoNickName = '',userInfoImg = '', newObj = {};
    let list = comment.list;
    if (value == ''){
      wx.showModal({
        title: '错误！',
        content: '请输入您的评论',
        showCancel: false,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          }
        }
      })
      return;
    }
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        newObj.img = res.userInfo.avatarUrl;
        newObj.user = res.userInfo.nickName;
        newObj.id = id;
        newObj.content = value;
        newObj.like = false;
        newObj.likeNum = 0;

        list.push(newObj);
        comment.commNum ++;
        comment.list = list;
        this.setData({
          isCommentOpen: false,
          commentValue: '',
          commentList: comment
        })
        profile.exhibitionDetail.commentList = comment;
      }
    })
  },

  // 评论输入侦听事件
  commentInput: function(e) {
    let value = e.detail.value;
    this.setData({
      commentValue: value
    })
  },

  // 评论点赞事件
  commentLikeTap: function(e) {
    let comment = this.data.commentList, id = e.detail.id;
    let list = comment.list;
    for (let i=0;i<list.length;i++){
      if (id == list[i].id) {
        if (list[i].like) {
          list[i].like = false;
          list[i].likeNum --;
          comment.likeNum --;
        }else{
          list[i].like = true;
          list[i].likeNum ++;
          comment.likeNum ++;
        }
      }
    }
    comment.list = list;
    this.setData({
      commentList: comment
    })
    profile.exhibitionDetail.commentList = comment;
  },

  // 关闭评论开关事件
  closeCommentTap: function(e){
    this.setData({
      isCommentOpen: false
    })
  },

  // 打开评论开关事件
  openCommentTap: function(e){
    this.setData({
      isCommentOpen: true
    })
  },

  // 打开查看评论事件
  openMessageTap: function(e){
    let list = this.data.tabList;
    for (let i=0;i<list.length;i++){
      if (list[i].id == 2) {
        list[i].onthis = true;
      }else{
        list[i].onthis = false;
      }
    }
    this.setData({
      tabList: list,
      bg: '../../images/tab_box_bg2.png',
      tabNum: 2
    })
  },

  // 展览like点击事件
  exhibitionLikeTap: function (e) {
    let like = this.data.exhibitionLike, num = this.data.likeNumber;
    if (like){
      like = false
      num --;
    }else{
      like = true
      num ++;
    }
    this.setData({
      exhibitionLike: like,
      likeNumber: num
    })
    profile.exhibitionDetail.exhibitionLike = like;
    profile.exhibitionDetail.likeNumber = num;
  },

  // 单个作品like点击事件
  likeTap: function(e) {
    let id = e.detail.id, list = this.data.items;
    for (let i=0;i<list.length;i++){
        if (id == list[i].id) {
          if (list[i].like == true) {
            list[i].like = false;
            list[i].likeNum --;
            this._doUpdateItem(list[i],i);
          }else{
            list[i].like = true;
            list[i].likeNum ++;
            this._doUpdateItem(list[i],i);
          }
        }
    }
    this.setData({
      items: list
    })
    profile.exhibitionDetail.exhProList = list;
    
    //this._doRefreshMasonry(this.data.items);
    //this.masonryHeightFun(300);
  },

  // tab 点击事件
  tabTap: function(e) {
    let id = e.detail.id, list = this.data.tabList, bg = '', tabNum = 0;
    for (let i=0;i<list.length;i++){
      if (id == list[i].id) {
        list[i].onthis = true;
        tabNum = list[i].id;
        bg = '../../images/tab_box_bg'+ list[i].id +'.png';
      }else{
        list[i].onthis = false;
      }
    }
    this.setData({
      tabList: list,
      bg: bg,
      tabNum: tabNum
    })
    if (id == 0){
      this._doRefreshMasonry(this.data.items);
      this.masonryHeightFun(300);
    }
  },

  // 签到点击事件
  signInTap: function(e) {
    if (profile.exhibitionDetail.signBtnText == '已签到') return;

    // 金币掉落效果
    const coin = this.selectComponent('#coin');
    coin.animation();
    this.setData({
      isShow: true
    })
    setTimeout(()=>{
      this.setData({
        isShow: false
      })
    },4000);

    /*********************************************/

    let list = profile.exhibitionDetail.signinList, number = profile.exhibitionDetail.signinNumber, img = profile.exhibitionDetail.userImg;
    list.shift();
    list.push(img);
    number++;
    this.setData({
      signinList: list,
      signinNumber: number,
      signBtnText: '已签到',
      signBtnText_en: 'Signed in',
    })
    profile.exhibitionDetail.signinList = list;
    profile.exhibitionDetail.signBtnText = '已签到';
    profile.exhibitionDetail.signBtnText_en = 'Signed in';
    profile.exhibitionDetail.signinNumber = number;
  },

  // swiper dot 事件
  bindchange: function(e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

  // 语言切换事件
  menuTap: function (e) {
    this.setData({
      lang: e.detail.lang
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '艺术展览'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Art Exhibition'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      isLong: app.globalData.model,
    })
    this._doRefreshMasonry(this.data.items);
  },

  // 页面到底部事件 -- 增加瀑布流内容
  // onReachBottom: function () {
  //   this._doAppendMasonry(this.data.items);
  // },

  // 
  _doUpdateItem(newItem,index) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.updateItem(newItem,index);
  },

  // 刷新瀑布流
  _doRefreshMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 增加瀑布流内容
  _doAppendMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry')
    // 获取接口数据后使用瀑布流组件append方法，当append完成后调用then，是否可触底价在的标志位可以在这里处理
    this.masonryListComponent.append(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 瀑布流容器高度获取与设置
  masonryHeightFun: function (time) {
    let height = this.data.masonryHeight;
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query.select('#masonry').boundingClientRect(rect=>{
        height = rect.height;
        this.setData({
          masonryHeight: height
        })
      }).exec();
    }, time);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.masonryHeightFun(1000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      lang: app.globalData.language,
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '艺术展览'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Art Exhibition'
      })
    }
  }
})